<template>
  <div>
    <el-dialog title="添加时间" :visible.sync="dialogVisible">
        <el-form>
            <el-form-item prop="time" label="时间段名称：">
                <el-input style="display: inline-block; width: 80%;" v-model="form.time" placeholder="请输入时间段名称"></el-input>
            </el-form-item>
            <el-form-item prop="startTime" label="每天开始时间：">
                <el-date-picker v-model="form.startTime" type="datetime" placeholder="请选择时间"></el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime" label="每天结束时间：">
                <el-date-picker v-model="form.endTime" type="datetime" placeholder="请选择时间"></el-date-picker>
            </el-form-item>
            <el-form-item prop="limit" label="商品数量上限：">
                <el-input style="width: 220px;" v-model="form.limit" placeholder="请输入商品数量上限"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: "AddTime",
    props: {
        value: {
            type: String,
            default: ""
        },
        show:{
            type: Boolean,
            default: false
        }
    },
    watch: {
        show:{
            handler(val){
                this.dialogVisible = val;
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            time: "",
            dialogVisible: this.show,
            form: {
                time: "",
                startTime: "",
                endTime: "",
                limit: ""
            }
        }
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
            this.$emit("close",false );
        },
        handleSubmit() {
            this.$emit("submit", this.form);
            this.dialogVisible = false;
        }
    }
}
</script>

<style>

</style>